<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache,must-ridate">
    <meta http-equiv="expires" content="0">
    <title>消息模块</title>
    <!-- 上传图片css -->
    <link rel="stylesheet" href="<s:url value="/html/appMsg/css/mui.css"></s:url>"/>
    <link rel="stylesheet" href="<s:url value="/html/appMsg/css/news.css"></s:url>"/>
    <!-- 穿梭框css -->
    <link rel="stylesheet" href="<s:url value="/html/appMsg/css/tree.css"></s:url>">
    <!-- 下拉css -->
    <link rel="stylesheet" href="<s:url value="/html/appMsg/static/css/fselect.css"></s:url>">

    <link rel="stylesheet" type="text/css" href="<s:url value="/html/appMsg/css/bootstrap.css"></s:url>"/>
    <link rel="stylesheet" href="<s:url value="/html/appMsg/css/index.css"></s:url>">
    <style>
        .col-xs-1{
            width: 150px !important;
            text-align: right;
        }
        #htmls img{
            width: 100px;
            height: 100px;
        }

        #htmls input{
            margin:10px 0;
        }

        .editor .control-label {
            width: 139px;
            font-size: 18px;
            font-family: PingFang SC;
            font-weight: bold;
            text-align: right;
        }
    </style>
</head>

<body>
<input id="openid" type="text" value="${openId}" hidden>
<div class="wrrapers">
    <h3 class="title">发布消息</h3>
    <div class="my-tab">
        <ul class="tab-wrraper clearfix">
            <li class="active one">
                <span>1</span>
                <span class="names">选择联系人</span>
            </li>
            <li class="two">
                <span>2</span>
                <span class="names">编辑内容</span>
            </li>
            <li class="three">
                <span>3</span>
                <span class="names">发送成功</span>
            </li>
        </ul>
        <p class="arrow1">►</p>
        <p class="arrow2">►</p>
    </div>
    <!-- 内容 -->
    <div class="my-content">
        <!-- 选择联系人 -->
        <div class="selectContacts">
            <div class="row clearfix">
                <!-- <div class="col-xs-3">
                    <div class="search-input">
                        <span class="glyphicon glyphicon-search"></span>
                        <input type="text" class="form-control">
                    </div>
                </div>
                <div class="col-xs-3">
                    22222
                </div> -->
                <div>
                    <div class="to__block">
                        <div class="to__left">
                            <div class="to__arrow"><span>←</span><span>→</span></div>
                            <div class="to__title">选择组织架构</div>
                            <div class="to__content">
                                <div class="to__search" hidden>
                                    <input id="searchInput" type="text" placeholder="请输入需要搜索的名称">
                                </div>
                                <div id="leftCont"></div>
                            </div>
                        </div>
                        <div class="to__right">
                            <div class="to__title">已选择（<span id="selectNum"></span>）人</div>
                            <div class="to__content" id="rightCont"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-6 btnArr" style="width: 870px;margin-top:10px;">
                    <button class="pull-right next-step">下一步</button>
                    <button class="pull-right new-group" data-toggle="modal" data-target="#myModal">新建分组</button>
                </div>
            </div>
        </div>
        <!-- 编辑内容 -->
        <div class="editor" hidden>
            <div class="form-group clearfix">
                <label class="col-xs-1 control-label" for="titles">标题</label>
                <div class="col-xs-4">
                    <input type="text" name="titles" id="titles" placeholder="请输入标题"/>
                </div>
            </div>
            <div class="form-group clearfix">
                <label class="col-xs-1 control-label" for="source">来源</label>
                <div class="col-xs-4">
                    <input type="text" name="source" id="source" placeholder="请输入来源"/>
                </div>
            </div>
            <div class="form-group clearfix">
                <label class="col-xs-1 control-label" for="source">内容</label>
                <div class="col-xs-4">
                        <textarea rows="10" id="contents" name="contents" placeholder="请输入内容"
                                  class="form-control "></textarea>
                </div>
            </div>
            <div class="form-group clearfix">
                <label class="col-xs-1 control-label" for="msgType">消息类型</label>
                <div class="col-xs-4">
                    <select id="msgType" class="form-control" placeholder="消息类型">
                        <option value="">自定义图片</option>
                        <option value="/html/appMsg/images/WenXinTiXing.png">温馨提示</option>
                        <option value="/html/appMsg/images/tongJiKuaiBao.png">统计快报</option>
                        <option value="/html/appMsg/images/TongJiShuJu.png">统计数据</option>
                        <option value="/html/appMsg/images/tongJiZhiShi.png">统计知识</option>
                    </select>
                </div>
            </div>
            <div class="form-group clearfix">
                <label class="col-xs-1 control-label" for="inform">通知人员</label>
                <div class="col-xs-4" id="select-multiple">
                    <select id="inform" class="form-control" multiple="multiple"></select>
                </div>
            </div>
            <div class="form-group clearfix diyImg">
                <label class="col-xs-1 control-label" for="source">图片</label>
                <div class="col-xs-4" id="htmls">
                    <img id="fileImg" src="/file/2019/10/13/1570961587799Lgpqk.jpg" alt="" hidden>
                    <input type="file" accept="image/*" id="fileupload" name="files"/>
                    <button class="col-sm-2 btn btn-large btn-primary" id="btn-upload">上传
                    </button>
                    <%--<div class="release_up_pic">--%>
                        <%--<div class="up_pic" style="position: relative">--%>
                                <%--<span id="chose_pic_btn">--%>
                                    <%--<input type="file" accept="image/*" id="fileupload" name="files"/>--%>
                                <%--</span>--%>
                            <%--<button class="col-sm-2 btn btn-large btn-primary" id="btn-upload"--%>
                                    <%--style="position: absolute;left: 152px;top: 37px;display: none;" >上传--%>
                            <%--</button>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                </div>
            </div>
            <div class="form-group clearfix radios">
                <label class="col-xs-1 control-label" for="source">是否发送短信</label>
                <div class="col-xs-4">
                    <label>
                        <input type="radio" name="isSend" value="true" checked>
                        <span>是</span>
                    </label>
                    <label>
                        <input type="radio" name="isSend" value="false">
                        否
                    </label>
                    <button class="pull-right confirm-send">确认发送</button>
                    <button class="pull-right back-editor"  style="margin-right: 10px;">返回上一级</button>

                </div>

            </div>
            <div style="width: 100px;height: 150px;"></div>
        </div>
        <!-- 发送成功 -->
        <div class="sendSuccess" hidden>
            <div class="row">
                <div class="col-xs-3">
                    <img src="<s:url value="/html/appMsg/images/successBg.png"></s:url>" alt="">
                </div>
                <div class="col-xs-3">
                    <h2>发送成功</h2>
                    <div>
                        <strong href="#">返回</strong>
                        <span class="timeBox">(<span class="clock">3</span>秒后自动返回)</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<!-- 新建分组模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
">
<div class=" modal-dialog modal-sm" style="margin-top:250px;">
    <div class="modal-content">
        <h4 align="center">新建分组名称</h4>
        <div class="modal-body">
            <input class="groupName" type="text" maxlength="10" placeholder="请输入组名（不超过十个字）">
        </div>
        <div class="modal-footer">
            <button id="confirmName">确认名称</button>
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>


<script type="text/javascript" src="/html/appMsg/js/jquery.min.js">
</script>
<!-- 上传图片js -->
<%--<script type="text/javascript" src="/html/appMsg/js/LocalResizeIMG.js"></script>--%>
<%--<script type="text/javascript" src="/html/appMsg/js/patch/mobileBUGFix.mini.js"></script>--%>
<script type="text/javascript" src="/html/appMsg/js/bootstrap.min.js">
</script>
<!-- 穿梭框js -->
<script type="text/javascript" src="/html/appMsg/js/tree.js"></script>
<!-- 下拉js -->
<script type="text/javascript" src="/html/appMsg/static/js/fselect.js"></script>
<%--上传图片文件--%>
<script type="text/javascript" src="/html/appMsg/js/ajaxfileupload.js"></script>
<script type="text/javascript" src="/html/appMsg/js/index.js"></script>
<script>
    $(function () {

        $('#inform').change(function () {
            console.log($('#inform').val());
        });
    })
</script>

</body>

</html>